<template>
  <h1>{{ userInfo.adminName }} {{ text }}您好！</h1>
  <button type="button" v-on:click="modifySex">修改性别</button>

  <hr />
  <h1>
    age: {{ age }}, <small>{{ flag }}</small>
  </h1>
  <button type="button" v-on:click="age++">修改age</button>
  <hr />
  <p v-for="item in goods.list" :key="item.gid">
    <b>{{ item.gname }}</b> ----<b> {{ useFormatDate(item.time, '-') }}</b>
  </p>
</template>

<script setup>
// import {getCurrentInstance} from 'vue';
import { computed, reactive, watch, ref, onMounted } from 'vue'
// 自定义hooks函数，以use开头的函数，都叫hooks函数。 useSlots, useAttrs都是hooks函数。
import useFormatDate from '@/utils/date.js'

import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
const userInfo = reactive({ adminName: '芳芳姐', sex: '女', age: 18 })

// 计算属性：
// const text = computed(() => (userInfo.sex === '女' ? '女士' : '先生'))

const text = computed({
  get: () => (userInfo.sex === '女' ? '女士' : '先生'),
  set: val => {
    userInfo.sex = val
  }
})

const modifySex = () => {
  // userInfo.sex = '男'
  text.value = '男'
}

// watch()监听：
let goods = reactive({
  list: []
})

// const { proxy } = getCurrentInstance() // 获取组件实例化对象，再从实例对象解构一个proxy对象出来。
//相当于 vue2的  this.$axios()
// proxy.$axios({
//   url: 'http://'
// })

new Promise(reslove => {
  setTimeout(function () {
    reslove([
      { gid: 1, gname: '苹果', time: 1683792531552 },
      { gid: 2, gname: '巴拉', time: 1683692531552 },
      { gid: 3, gname: '尖椒', time: 1683592531552 },
      { gid: 4, gname: '红椒', time: 1683492531552 }
    ])
  }, 2000)
}).then(res => {
  // console.log(res)
  goods.list = res
})

let age = ref(18)
let flag = ref('少年')
//语法1： 监听ref变量： watch(参数1，参数2) ：
// 参数1：应该使用一个回调函数，并返回一个依赖的ref对象
// 参数2： 依赖改变时，执行的回调函数。函数有2个参数，参数1表示改变后的值，参数2表示改变前的值。
// watch(age, (newV, oldV) => {
//   console.log('age改变前后的值：', newV, oldV)
//   if (age.value <= 18) {
//     flag.value = '少年'
//   } else if (age.value <= 28) {
//     flag.value = '青年'
//   } else if (age.value <= 50) {
//     flag.value = '中年'
//   } else {
//     flag.value = '老年'
//   }
// });
//语法2： 监听ref变量 watch([参数1]，参数2) ：
// watch([age], (newV, oldV) => {
//   // console.log('age改变前后的值：', newV, oldV)
//   if (age.value <= 18) {
//     flag.value = '少年'
//   } else if (age.value <= 28) {
//     flag.value = '青年'
//   } else if (age.value <= 50) {
//     flag.value = '中年'
//   } else {
//     flag.value = '老年'
//   }
// })

// 语法3： 监听1个reactive()变量
// watch(
//   () => userInfo.sex,
//   newV => {
//     // 女的减少5岁，男的，加10岁
//     if (newV === '男') {
//       age.value += 10
//     } else {
//       age.value -= 5
//     }
//   }
// )
// 语法4： 监听多个reactive()对象的属性
// watch([() => userInfo.sex, () => goods.list], ([nsex, nlist], [osex, olist]) => {

watch([() => userInfo.sex, () => goods.list], ([nsex]) => {
  // console.log(nsex, nlist, osex, olist)
  // 女的减少5岁，男的，加10岁
  if (nsex === '男') {
    age.value += 10
  } else {
    age.value -= 5
  }
})

// 组件内的导航守卫：
// 与 beforeRouteLeave 相同，无法访问 `this`
onBeforeRouteLeave(() => {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  // 取消导航并停留在同一页面上
  if (!answer) return false
})

// const userData = ref()

// 与 beforeRouteUpdate 相同，无法访问 `this`
// /home/goods/123-> /home/goods/:id
onBeforeRouteUpdate(async (to, from) => {
  //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
  if (to.params.id !== from.params.id) {
    // userData.value = await fetchUser(to.params.id)
  }
})

onMounted(() => {
  const route = useRoute()
  console.log(route.params) // <rouer-link :to={params, name}></rouer-link>,和 动态路由时
  console.log(route.query) // <rouer-link :to={path, query}></rouer-link> | <rouer-link to="/product?id=12213"</rouer-link>
  console.log(route.fullPath)
})
onMounted(() => {
  const router = useRouter()
  console.log(router) // 路由实例对象
  router.push('/')
})
</script>

<style></style>
